<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知了堂年终回顾</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .bg1{
        width: 750px;
        height: 1468px;
    background-image: url(imgs/bg1.jpg);
    position: relative;
}
    .top1{
        background-image: url(imgs/top1.png);
        width: 237px;
        height: 75px;
        float: left;
    }
    .top2{
        background-image: url(imgs/top2.png);
        width: 303px;
        height: 143px;
        float: right;        
    }
    .logo{
        width: 182px;
        height: 60px;
        background-image: url(imgs/logo.png);
        position: absolute;
        left: 80px;
        top: 80px;
        float: left;
    }
    .box{
        background-image: url(imgs/border.png);
        width: 571px;
        height: 482px;
        position: relative;
        float: left;
        bottom: 110px;
        left: 10%;
    }
    .title1{
        width: 215px;
        height: 218px;
        background-image: url(imgs/title1.png);
        position: relative;
        float: left;
        left: 170px;
        top: 70px;
    }
     .border{
        width: 150px;
        height: 55px;
        font-size: 25px;
        padding: 1px 0;
        float: right;
        position: relative;   
        right: 45px;  
        top: 7px;
    }
     .title2{
        width: 165px;
        height: 162px;
        background-image: url(imgs/title2.png);
        float: right;
        position: relative;
        top: 100px;
        left: 50px;
    }
     .title3{
        width: 149px;
        height: 157px;
        background-image: url(imgs/title3.png);
        float: left;
        position: relative;
        left: 120px;
        top: 190px;

    }
     .title4{
        width: 220px;
        height: 217px;
        background-image: url(imgs/title4.png);
        float: right;
        position: relative;
        top: 130px;
        left: 230px;
    } 
    .span1{
        width: 80%;
        color: white;
        font-size: 16px;
        position: relative;
        top: 55%;
        left: 33px;
    }
    .span2{
        width: 80%;
        position: relative;
        top: 57%;
        color: white;
        font-size: 16px;
        left: 33px;
    }
    .tel{
        width: 23px;
        height: 24px;
        background-image: url(imgs/tel.png);
        background-repeat: no-repeat;
        position: relative;
        top: 950px;
        left: 290px;
    }
    .phone{
        background: none;
        border: none;
        font-size: 18px;
        color: #fffefe;
        position: relative;
        top: 920px;
        left: 110px;
    }
    .footer{
        width: 750px;
        height: 222px;
        background-image: url(imgs/footer.png);
        position: relative;
        top: 1150px;
    }
    .button{
        height: 35px;
        width: 225.11px;
        background-color: yellow;
        border: none;
        position: relative;
        top: 270px;
        left: 260px;
        cursor: pointer;
    }
</style>
<body>
    <div class="bg1">
        <div class="top1"></div>
        <div class="top2"></div>
        <div class="logo"></div>
        <div class="title1"></div>
        <div class="box">
            <div class="border">
            <big style="color: white;">知了堂</big>
            </div>
            <div class="title2"></div>
            <div class="title3"></div>
            <div class="title4"></div>
        </div>
        <div class="span1">春光灿烂之时，我们携梦而来</div>
        <div class="span2">您的专属记忆，等您温暖回顾</div>
        <div class="tel"></div>
        <input type="text" placeholder="输入您的电话" class="phone">
        <div class="footer"></div>
       <a href="./知了堂年终回顾2.html"><button type="submit" class="button">立即回顾</button></a>
    </div>
</body>
</html>